// 引入了vue和vue-router
import Vue from "vue";
import VueRouter from "vue-router";

// 引入了三个组件
// import MoviesView from "../views/MoviesView";
// import VideoView from "../views/VideoView";
// import MiniView from "../views/MiniView";

// 使用插件
Vue.use(VueRouter);

// 创建路由表
const routes = [
  {
    // 重定向
    path: "/",
    redirect: "/movies",
  },
  {
    path: "/movies",
    component: () => import("../views/MoviesView"),
    // 还可以使用children的属性，用于做路由嵌套
    children: [
      {
        path: "/movies",
        redirect: "/movies/hot",
      },
      {
        path: "/movies/hot",
        component: () => import("../components/HotView"),
      },
      {
        path: "/movies/cinema",
        component: () => import("../components/CinemaView"),
      },
    ],
  },
  {
    path: "/video",
    component: () => import("../views/VideoView"),
  },
  {
    path: "/mini",
    alias: "/mini-video",
    // component: MiniView,
    // 按需加载组件
    component: () => import("../views/MiniView"),
  },
  {
    // /:id加上以后就变成动态路由了
    path: "/detail/:id",
    name: "detail",
    // 在detail组件里面就可以直接使用props来接受动态参数了
    props: true,
    component: () => import("../views/DetailView"),
  },
  {
    // 命名视图需要使用components
    path: "/other",
    components: {
      a: () => import("../views/OtherView1"),
      b: () => import("../views/OtherView2"),
    },
  },
  {
    // 404路由写的位置是整个路由表的最后面
    // 因为vue的路由是排他性路由，react的路由是包容性路由
    // 排他性的路由的意思是从上往下进行匹配，匹配到一个就好了
    path: "*",
    component: () => import("../views/NotFound.vue"),
    // redirect: "/movies",
  },
];

// 创建了路由实例
const router = new VueRouter({
  // 将路由模式转成history模式
  mode: "history",
  routes,
});

// 暴露路由实例
export default router;
